<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>outline的应用</title>
	<style type="text/css">
		.line{
			outline: red 5px dotted;
		}
		.color{
			outline-color: pink; 
			outline-style: solid;
		}
		.dotted{
			outline-style:dotted;
		}
		.dashed{
			outline-style:dashed;
		}
		.solid{
			outline-style:solid;
		}
		.double{
			outline-style:double;
		}
		.groove{
			outline-style:groove;
		}
		.ridge{
			outline-style:ridge;
		}
		.inset{
			outline-style:inset;
		}
		.outset{
			outline-style:outset;
		}
		.width{
			outline-style: solid;
			outline-color: pink;
			outline-width: 3px;
		}

	</style>
</head>
<body>
	<p><span class="line">使用outline属性在元素周围画一条线</span></p>
	<p><span class="color">轮廓的颜色</span></p>
	<p><span class="dotted">轮廓的样式1</span></p>
	<p><span class="dashed">轮廓的样式2</span></p>
	<p><span class="solid">轮廓的样式3</span></p>
	<p><span class="double">轮廓的样式4</span></p>
	<p><span class="groove">轮廓的样式5</span></p>
	<p><span class="ridge">轮廓的样式6</span></p>
	<p><span class="inset">轮廓的样式7</span></p>
	<p><span class="outset">轮廓的样式8</span></p>
	<p><span class="width">轮廓的宽度</span></p>
</body>
</html>